<template>
  <el-main>
    <el-form :model="searchObject" label-width="80px" :inline="true" size="small">

      <el-form-item>
        <el-input v-model="searchObject.fileName" placeholder="请输入文件名称" clearable/>
      </el-form-item>

      <el-form-item>
        <el-input v-model="searchObject.type" placeholder="请输入文件类型" clearable/>
      </el-form-item>

      <el-form-item>
        <el-input v-model.number="searchObject.size" placeholder="请输入文件大小" clearable/>
      </el-form-item>

      <el-form-item>

        <el-button type="primary" icon="el-icon-search" @click="selectPage">查询</el-button>

        <el-button type="warning" icon="el-icon-refresh-right" @click="resetSearchObject">重置</el-button>

<!--        :before-upload="beforeAvatarUpload"-->

        <el-upload action="http://localhost:7777/file/upload?module=file" :data="uploadHeader" :show-file-list="false"
                   :on-success="handleAvatarSuccess" style="display: inline-block">
          <el-button type="success" icon="el-icon-upload2" style="margin-left: 10px" v-if="hasPermission('company_file_upload')">上传</el-button>
        </el-upload>

      </el-form-item>

    </el-form>

    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column prop="fileName" label="文件名称"/>
      <el-table-column prop="type" label="文件类型"/>
      <el-table-column prop="size" label="文件大小(KB)" sortable/>
      <el-table-column prop="createTime" label="上传时间" sortable/>

      <el-table-column label="操作选项" width="200" align="center">
        <template slot-scope="scope">

          <el-button size="small" type="primary" icon="el-icon-download" v-if="hasPermission('company_file_download')" @click="handleDownloadFile(scope.row)">下载</el-button>

          <el-button size="small" type="danger" icon="el-icon-delete" v-if="hasPermission('company_file_delete')" @click="handleDelete(scope.row)">删除</el-button>
<!--          执行此操作将无法撤销，确定删除吗？-->
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="current"
      :page-size="size"
      :total="total"
      :page-sizes="[1, 5, 10, 20, 50, 100, total]"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>

  </el-main>
</template>

<script>

    import {getToken} from '@/utils/auth';
    import file from "../../../api/file";

    export default {
        name: "fileList",
        data() {
            return {
                searchObject: {
                    fileName: "",
                    type: "",
                    size: ""
                },
                tableData: [],
                current: 1,
                size: 10,
                total: 0,
                uploadHeader: {"token": getToken()}
            }
        },
        created() {
            this.selectPage();
        },
        methods: {
            handleAvatarSuccess(res) {
                if(res.code === 200){
                    this.$message.success(res.message);
                }else{
                    this.$message.error(res.message);
                }
                this.selectPage();
                this.$forceUpdate();
            },
            // beforeAvatarUpload(file) {
            //     const isJPG = file.type === 'image/jpeg';
            //     const isPNG = file.type === 'image/png';
            //     const limit = file.size / 1024 / 1024 < 5;
            //
            //     if (!isJPG && !isPNG) {
            //         this.$message.error('上传本人头像只能是 JPG 或 PNG 格式!');
            //     }
            //     if (!limit) {
            //         this.$message.error('上传头像大小不能超过 5MB!');
            //     }
            //     return (isJPG || isPNG) && limit;
            // },
            resetSearchObject() {
                this.searchObject = {};
                this.selectPage();
            },
            handleCurrentChange(current) {
                this.current = current;
                this.selectPage();
            },
            handleSizeChange(size) {
                this.size = size;
                this.selectPage();
            },
            async selectPage(){
                let res = await file.selectListOfFile(this.current, this.size, this.searchObject);
                if (res.code === 200) {
                    this.current = res.data.current;
                    this.size = res.data.size;
                    this.total = res.data.total;
                    this.tableData = res.data.records;
                }
            },
            async handleDelete(row){
                let confirm = await this.$commonConfirm("执行此操作将无法撤销，确定删除吗？");
                if (confirm) {
                    let res = await file.delete(row.id,row.fileUrl);
                    if (res.code === 200) {
                        this.$message.success(res.message);
                        this.selectPage();
                    } else {
                        this.$message.error(res.message);
                    }
                }
            },
            handleDownloadFile(row){
                window.open(`http://localhost:7777/file/download?url=${row.fileUrl}&token=${getToken()}`);
            }
        }
    }
</script>

<style scoped>

</style>
